<template>
	<div class="user">
		<!-- 头部导航栏 -->
		<van-nav-bar title="我的" left-text="返回" left-arrow @click-left="$router.back()">
			<template #right>
				<i class="iconfont icon-home" @click="$router.push('/home')"></i>
			</template>
		</van-nav-bar>
		<!-- 头像 -->
		<router-link :to="`/user_edit?id=${$route.query.id}`" class="info">
			<div class="avatar">
				<van-image round fit="cover" width="100%" height="100%"
					:src="userinfo.head_img" />
			</div>
			<div class="center">
				<p class="username">
					<i class="iconfont" :class="{xingbienan: userinfo.gender === 1 , xingbienv: userinfo.gender === 0}">
					</i>
					<span>{{userinfo.nickname}}</span>
				</p>
				<p class="date">{{userinfo.create_date | formatDate}}</p>
			</div>

			<i class="iconfont icon-arrow-right"></i>
		</router-link>

		<!-- 主体信息 -->
		<!-- cell -->
		<div class="userCenter">
			<MyCell title="我的关注" value="关注的用户" to="/user_follow"></MyCell>
			<MyCell title="我的跟帖" value="跟帖/回复" to="/user_comment"></MyCell>
			<MyCell title="我的收藏" value="文章/视频" to="/user_collect"></MyCell>
			<MyCell title="设置"></MyCell>
		</div>

		<!-- 退出按钮 -->
		<MyButton type="danger" @click="signOutFn">Sign out</MyButton>

	</div>
</template>

<script>
	import MyCell from '../components/MyCell.vue'
	import MyButton from '../components/MyButton.vue'
	import { removeToken , removeID } from '../utils/localData.js'
	import { userDeatilByIdApi } from '../apis/user.js'
	import request from '../utils/request.js'
	export default {
		data() {
			return {
				userinfo: {}
				//isGender: true 直接class上绑定
			}
		},

		components: {
			MyCell,
			MyButton
		},

		async created() {
			const res = await userDeatilByIdApi(this.$route.query.id);
			
			/* 
				res获取用户头像相对地址
				修改头像相对地址，拼接请求基地址后重新赋值给res
			 */
			res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
			this.userinfo = res.data.data;
			console.log(res);
		
		},

		mounted() {
			//直接class上绑定
			//this.userinfo.gender === 1 ? this.isGender = true : this.isGender = false;
		},

		methods: {
			signOutFn() {
				this.$dialog.confirm({
						message: '是否要退出？',
						theme: 'round-button'
					})
					.then(() => {
						// on confirm
						removeToken();
						removeID();
						this.$router.replace({path: '/'})
					})
					.catch(() => {});
			}
		},
		



	}
</script>

<style lang="less" scoped>
	.icon-home{
		font-size: 20px;
		color: #1989fa;
	}
	.info {
		height: 120px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		border-bottom: 5px solid #ddd;

		.avatar {
			width: 80px;
			height: 80px;
		}

		.center {
			flex: 1;
			text-align: left;
			margin-left: 20px;

			.username {
				font-size: 16px;
				margin-bottom: 10px;

				.xingbienan {
					background-color: #00aaff;
					border-radius: 50%;
					color: #FFFFFF;
					padding: 1px;
				}

				.xingbienv {
					background-color: #ff557f;
					border-radius: 50%;
					color: #FFFFFF;
					padding: 1px;
				}

				span {
					font-weight: bold;
					margin-left: 4px;
					color: #000000;
				}
			}

			.date {
				font-size: 14px;
				color: #666;
			}
		}

		.icon-arrow-right {
			color: #666666;
			font-size: 18px;
		}
	}
</style>
